<template>
	<view class="container">
		
		<view class="flex-between row boxPanel ">
		  <view class="">姓名</view>
		  <view class="row-right" style="flex: 1;">
		     <input type="text" placeholder="填写真实姓名" v-model="formData.name" placeholder-class="inputs" class="" style="text-align: right;">
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">手机号</view>
		  <view class="row-right" style="flex: 1;">
		     <input type="number" placeholder="请输入手机号" maxlength="11" v-model="formData.phone" placeholder-class="inputs" class="" style="text-align: right;">
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">用餐人数</view>
		  <view class="row-right" style="flex: 1;">
		     <input type="number" placeholder="请输入人数" v-model="formData.peopleNum" placeholder-class="inputs" class="" style="text-align: right;">
		  </view>
		</view>
		<view class="flex-between row boxPanel " @click="showDate = true">
		  <view class="">用餐时间</view>
		  <view class="flex-y-center" style="width: 50%;">
		     <input type="text" placeholder="请选择用餐时间" v-model="formData.diningTime" placeholder-class="inputs" :disabled="true" style="text-align: right;">
			<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
		  </view>
		</view>
		<view class="boxPanel row">
			<view class="m-b-10">定制需求</view>
			<textarea placeholder="请填写其他特殊需求" placeholder-class="inputs" v-model="formData.remark"></textarea>
		</view>
		
		<u-datetime-picker :show="showDate" v-model="value" mode="datetime" @confirm="confirmDate" @cancel="cancelDate"> </u-datetime-picker>
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="submit">立即定制</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				//时间
				showDate: false,
				value: Number(new Date()),
				formData: {
					name: '', // 姓名
					phone: '', // 手机号
					peopleNum: '', // 用餐人数
					diningTime: '', // 用餐时间
					remark: '' // 定制需求
				}
			}
		},
		onLoad(data) {
		  this.isIphoneX = this.$util.uniappIsIPhoneX()
		},
		methods: {
			confirmDate(e) {
				this.formData.diningTime = uni.$u.date(e.value,'yyyy-mm-dd hh:MM');
				this.showDate = false;
			},
			cancelDate() {
				this.formData.diningTime = "";
				this.showDate = false;
			},
			submit() {
				if(!this.validateForm()) return;
				
				uni.showLoading({
					title: '提交中...'
				});

				this.$api.sendRequest({
			      url: "/api/food/applycustom",
			      data: {
			        realname: this.formData.name,
					mobile: this.formData.phone,
					food_time: this.formData.diningTime,
					people_num: this.formData.peopleNum,
					remark: this.formData.remark,
			      },
			      success: res => {
			        if(res.code == 0) {
						uni.hideLoading();
						uni.showToast({
							title: '定制成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					
			        }else {
						this.$util.showToast(res.message);
					}
			      }
			    })
			},
			validateForm() {
				if(!this.formData.name) {
					uni.showToast({title: '请输入姓名', icon: 'none'});
					return false;
				}
				if(!this.formData.phone || this.formData.phone.length !== 11 ) {
					uni.showToast({title: '请输入正确的手机号', icon: 'none'});
					return false;
				}
				if(!this.formData.peopleNum || isNaN(this.formData.peopleNum)) {
					uni.showToast({title: '请输入正确的用餐人数', icon: 'none'});
					return false;
				}
				if(!this.formData.diningTime) {
					uni.showToast({title: '请选择用餐时间', icon: 'none'});
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss" scoped>
.boxPanel {
	padding: 40rpx 24rpx;
}
.row {
	.inputs {
		font-size: 28rpx;
		color: #B8BAC2;
	}
}
textarea {
  height: 100rpx;
}
</style>
